<template>
  <div
    :class="{
      'is-bg': value.layout.isShowBg,
      'is-shadow': value.layout.isShowShadow
    }"
    class="dog-desktop-paner"
  >
    <div v-if="value.layout.isShowHead" class="paner-head">
      <slot name="head">
        <div class="head-title">
          <label>{{ value.name }}</label>
        </div>
      </slot>
    </div>
    <div class="paner-body">
      <slot name="body">
        <div class="paner-content"></div>
      </slot>
    </div>
    <slot name="foot"></slot>
  </div>
</template>

<script>
import props from './props.js'
import mixins from './mixins.js'

export default {
  mixins: [mixins],

  props: {
    value: {
      type: Object,
      default() {
        return {
          ...props
        }
      }
    }
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
@import './style/panel.less';
</style>
